<!--
 * @Author: wukunling 13022195532@163.com
 * @Date: 2024-09-30 11:08:08
 * @LastEditors: wukunling 13022195532@163.com
 * @LastEditTime: 2024-10-01 22:27:40
 * @FilePath: /electron-vue3-template-main/src/renderer/views/components/list-table.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>  
    <a-table class="list-table"  :pagination="false" :columns="columns" :data-source="dataSource" bordered>
        <template #bodyCell="{ column, text, record }">
            <template v-if="[ 'localIp', 'localPort'].includes(column.dataIndex)">
                <div>
                    <a-input v-if="editableData[record.key]" v-model:value="editableData[record.key][column.dataIndex]"
                        style="margin: -5px 0" />
                    <template v-else>
                        {{ text }}
                    </template>
                </div>
            </template>
            <template v-else-if="column.dataIndex === 'name'" >
              <span class="name-url"> {{ text }} </span>
              <span  class="name-copy" @click="touchCopy(text)"><CopyOutlined  /></span>
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
                <div class="editable-row-operations">
                    <span v-if="editableData[record.key]">
                        <a-typography-link @click="save(record.key)">保存</a-typography-link>
                        <a-popconfirm title="Sure to cancel?" @confirm="cancel(record.key)">
                            <a>取消</a>
                        </a-popconfirm>
                    </span>
                    <span v-else>
                        <a @click="edit(record.key)">编辑</a>
                    </span>
                </div>
            </template>
        </template>
    </a-table>
</template>
<script setup>
import { cloneDeep } from 'lodash-es';
import { reactive, ref, defineEmits } from 'vue';
import {CopyOutlined,CopyFilled } from '@ant-design/icons-vue';
import useClipboard from 'vue-clipboard3'
import { message } from 'ant-design-vue';
const emit = defineEmits(['custom-event']);
const columns = [
    {
        title: '外网访问地址',
        dataIndex: 'name',
        width: '25%',
    },
    {
        title: '转发本地ip',
        dataIndex: 'localIp',
        width: '15%',
    },
    {
        title: '转发本地端口',
        dataIndex: 'localPort',
        width: '40%',
    },
    {
        title: '操作',
        dataIndex: 'operation',
    },
];
const data = [];
for (let i = 0; i < 1; i++) {
    data.push({
        key: i.toString(),
        name: `http://47.121.182.221:81`,
        "type": "tcp",
        "port": 81,
        "localIp": "192.168.1.14",
        "localPort": 5500
    });
}
const dataSource = ref(data);
const editableData = reactive({});
const edit = key => {
    editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
};
const save = key => {
    Object.assign(dataSource.value.filter(item => key === item.key)[0], editableData[key]);
    delete editableData[key];
    let result = cloneDeep(dataSource.value)
    console.log('saveCurrentCon', result,window.primaryWindowAPI)
    window.primaryWindowAPI.saveNetServe(result)
    // emit('saveCurrentCon', result);

};
const cancel = key => {
    delete editableData[key];
};


// 点击复制
function touchCopy (e) {
  // 调用
  copy(e)
}

const { toClipboard } = useClipboard()
const copy = async (msg) => {
  try {
    // 复制
    debugger
    await toClipboard(msg)
    message.info('复制成功');
    // 复制成功
  } catch (e) {
    // 复制失败
  }
}
</script>
<style scoped>
.list-table .name-url{
    cursor: pointer;
}
.list-table .name-url:hover{
    color: #1890ff;
}
.list-table .name-copy{
    cursor: pointer;
    color: #1890ff;
}
.editable-row-operations a {
    margin-right: 8px;
}
</style>